<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-shop"></i> 订单管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-input v-model="search.fitMobile" placeholder="服务商经营手机号" class="handle-input mr10"></el-input>
        <el-input v-model="search.orderNo" placeholder="订单号" class="handle-input mr10" width="55"></el-input>
        <el-input v-model="search.mobile" placeholder="用户手机号" class="handle-input mr10" width="55"></el-input>
        <el-select class="handle-input mr10" v-model="search.contractStatus" placeholder="签约状态">
          <el-option v-for="item in contractStatusList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select class="handle-input mr10" v-model="search.status" placeholder="订单状态">
          <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="handle-box">
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <!-- <el-button type="primary" @click="showExport = true">导出</el-button> -->
      </div>
      <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
        <el-table-column prop="affirmTime" label="确认时间" align="center" :formatter="dateFormat"></el-table-column>
        <el-table-column label="签约状态" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.contractStatus == '0'">待签约</el-tag>
            <el-tag v-if="scope.row.contractStatus == '1'">已签约</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="contractTime" label="签约时间" align="center" :formatter="dateFormat"></el-table-column>
        <el-table-column prop="money" label="金额" align="center"></el-table-column>
        <el-table-column prop="orderNo" label="订单号" align="center"></el-table-column>
        <el-table-column prop="payTime" label="支付时间" align="center" :formatter="dateFormat"></el-table-column>
        <el-table-column label="支付方式" width="100" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.payWay == '4'">余额 </el-tag>
            <el-tag v-if="scope.row.payWay == '5'">积分 </el-tag>
            <el-tag v-if="scope.row.payWay == '10'">汇聚 </el-tag>
            <el-tag v-if="scope.row.payWay == '11'">汇聚银行卡 </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="standard" label="规格" width="100" align="center"></el-table-column>
        <el-table-column label="订单状态" align="center" width="100">
          <template #default="scope">
            <el-tag v-if="scope.row.status == '0'">待支付</el-tag>
            <el-tag v-if="scope.row.status == '1'">待审核</el-tag>
            <el-tag v-if="scope.row.status == '2'">已完成</el-tag>
            <el-tag v-if="scope.row.status == '3'">已取消</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="创建时间" align="center" :formatter="dateFormat"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button type="text" @click="confirm(scope.row)">确认</el-button>
            <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.row)">删除装修订单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex" :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
      </div>
    </div>
    <!-- 导出框 -->
    <el-dialog title="导出" v-model="showExport" width="30%">
      <el-form ref="form" :model="eList" label-width="100px">
        <el-form-item label="创建时间范围">
          <el-date-picker v-model="eList.createTime" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-radio-group v-model="eList.tradeStatus">
            <el-radio :label="0">待支付</el-radio>
            <el-radio :label="1">待发货</el-radio>
            <el-radio :label="2">待收货</el-radio>
            <el-radio :label="3">已取消</el-radio>
            <el-radio :label="4">已完成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input v-model="eList.mobile" placeholder="请填写手机号"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showExport = false">取 消</el-button>
          <el-button type="primary" @click="orderExport">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { api, apiEx, upload } from "@/api/index";
import { formatDate } from "../../common/data";
import moment from "moment";
export default {
  inject: ["reload"],
  name: "basetable",
  data() {
    return {
      query: {
        parentid: "832cf97356bb4f5ea1d03a115992cd52",
        status: 100,
        pageNo: 1,
      },
      search: {
        createTime: null
      },
      tableData: [],
      showExport: false,
      pageTotal: 0,
      form: {},
      list: {},
      eList: {
        createTime: null
      },
      createTime: null,
      contractStatusList: [
        { value: 0, label: "待签约" },
        { value: 1, label: "已签约" },
      ],
      statusList: [
        { value: 0, label: "待支付" },
        { value: 1, label: "待审核" },
        { value: 2, label: "已完成" },
        { value: 3, label: "已取消" },
      ],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    joinpic(item) {
      return `https://www.yaozhuasocial.com/imgs/${item}`
    },

    // 时间戳转换
    dateFormat: function (row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    timeFormat(item) {
      return `${formatDate(new Date(item[0]), "yyyy-MM-dd hh:mm:ss")} - ${formatDate(new Date(item[1]), "yyyy-MM-dd hh:mm:ss")}`
    },

    // 触发搜索按钮
    handleSearch() {
      if (this.search.createTime != null) {
        this.search.createTime = this.timeFormat(this.search.createTime)
      }
      this.getData();
    },


    // 获取列表信息
    getData() {
      api('/web/fitmentOrder/g', {
        limit: 10,
        offset: this.query.pageNo,
        mobile: this.search.mobile,
        contractStatus: this.search.contractStatus,
        fitMobile: this.search.fitMobile,
        orderNo: this.search.orderNo,
        status: this.search.status,
      }).then((res) => {
        this.tableData = res.data.rows;
        this.pageTotal = res.data.total;
      });
    },

    //导出
    orderExport() {
      this.showExport = false;
      if (this.eList.createTime != null) {
        this.eList.createTime = this.timeFormat(this.eList.createTime)
      }
      apiEx('/web/so/soe', this.eList).then((res) => {
        const blob = new Blob([res]); // 创建blob对象
        const fileName = "自营订单.xlsx";
        const elink = document.createElement("a"); // 创建的标签
        elink.download = fileName;
        elink.style.display = "none";
        elink.href = URL.createObjectURL(blob); // 创建url
        document.body.appendChild(elink); // 把 创建的标签追加到body里
        elink.click();
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink); // 移除标签
        this.$message({
          message: "导出成功！！！",
          type: "success",
        });
        this.$refs.multipleTable.clearSelection();
      });
    },


    // 分页导航
    handlePageChange(val) {
      this.query.pageNo = val;
      this.getData();
    },

    //确认
    confirm() {
      this.$confirm("确认该订单？", "提示", { type: "warning" }).then(() => {
        api('/web/fitmentOrder/affirm', {
          id: row.id,
        }).then((res) => {
          if (res.code === 2000) {
            this.$message.success(res.message);
            this.reload();
          } else {
            this.$message.error(res.message);
          }
        });
      }).catch(() => { });
    },


    // 删除操作
    handleDelete(row) {
      this.$confirm("确定要删除吗？", "提示", { type: "warning" }).then(() => {
        api('/web/fitmentOrder/d', {
          id: row.id,
        }).then((res) => {
          if (res.code === 2000) {
            this.$message.success(res.message);
            this.reload();
          } else {
            this.$message.error(res.message);
          }
        });
      }).catch(() => { });
    },
  },
};
</script>

<style lang="scss" scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 180px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.green {
  color: #23b654;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}

.crop-demo {
  .pre-img {
    height: 146px;
    background: #f8f8f8;
    border: 1px solid #eee;
  }
}

.picPreview {
  width: 100%;
}
</style>
<style>
.hide .el-upload--picture-card {
  display: none;
}
</style>
